<template>
	<div class="scoreAll">
		<div class="basicInfo">
			<span>
				赛事名称：
				<b>{{ MatchInfoLayout.com_name }}</b>
			</span>
			<span>
				裁判长：
				<b>{{ MatchInfoLayout.referee_name }}</b>
			</span>
			<el-button type="primary" class="goMatchForm" @click="checkSchedule">查看战表及成绩</el-button>
			<el-button type="primary" class="goMatchForm" @click="refereeEvaluation">裁判比赛评估</el-button>
			<a :href="score_sheet_export_url" download="导出成绩表">
				<el-button type="primary" class="goMatchForm" @click="scoreSheetExport()" v-loading="export_loading">导出成绩表</el-button>
			</a>
			<a :href="preliminariesInfo_export_url" download="导出预选赛名单">
				<el-button type="primary" class="goMatchForm" v-if="com_system && com_system == 5">导出预选赛名单</el-button>
			</a>
		</div>
		<div class="tableBox">
			<ul class="group">
				<li :class="{ isGroup: activeProjectIndex == index }" v-for="(project, index) in projectArr" :key="index" @click="projectChoose(index)">
					{{ project.project }}
					<span class="peopleNum">({{ project.signUp_num }})</span>
				</li>
			</ul>
			<div class="tableMain" v-loading="loading">
				<table v-if="com_system != 5">
					<thead>
						<tr>
							<td>姓名</td>
							<td>单位</td>
							<td>本次比赛名次</td>
							<td>本次比赛积分</td>
							<td v-if="hasDiy || confirmDiy">自定义积分</td>
							<td>总积分</td>
							<td>总名次</td>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index, key) in rankList" :key="key">
							<td>{{ item.user_name }}</td>
							<td>{{ item.one_limit }} {{ item.two_limit }} {{ item.three_limit }}</td>
							<td>{{ item.ranking }}</td>
							<td>{{ item.series_now }}</td>
							<td v-if="hasDiy"><input type="text" placeholder="请输入" v-model="item.custom_integral" /></td>
							<td v-if="confirmDiy && !hasDiy">{{ item.custom_integral }}</td>
							<td>{{ item.series_all }}</td>
							<td>{{ item.ranking_all }}</td>
						</tr>
					</tbody>
				</table>
				<table v-else>
					<thead>
						<tr>
							<td>区</td>
							<td>姓名</td>
							<td>单位</td>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, index, key) in rankList" :key="key">
							<td>{{ item.second_order }}</td>
							<td>{{ item.user_name }}</td>
							<td>{{ item.one_limit }}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="btnGroup">
			<el-button type="primary" plain @click="diy" v-if="!hasDiy">自定义积分项</el-button>
			<el-button type="primary" plain @click="comfirmDiy" v-else="!hasDiy">确定</el-button>
			<el-button type="info" plain v-if="!hasDiy" @click="goback">返回</el-button>
			<el-button type="info" plain v-if="hasDiy" @click="cancle">取消</el-button>
		</div>
	</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			hasDiy: false,
			confirmDiy: false,
			activeProjectIndex: 0,
			projectArr: [],
			loading: false,
			com_system: null,
			index: 0,
			type: null,
			export_loading: false
		};
	},
	created() {
		let group_id = this.$route.query.group_id || ''
		this.$store.dispatch('getMatchInfoLayout', this.$route.query.MatchId).then(() => {
			delete this.MatchInfoLayout.ground_name;
			let getMatchInfo = JSON.parse(JSON.stringify(this.MatchInfoLayout));
			for (let item in getMatchInfo) {
				if (typeof getMatchInfo[item] == 'object' && getMatchInfo[item].signUp_num > 0) {
					this.projectArr.push(getMatchInfo[item]);
				}
			}
			for (let index = 0; index < this.projectArr.length; index++) {
				const element = this.projectArr[index];
				if (group_id && element.project_id == group_id) {
					this.activeProjectIndex = index
				}
			}
			this.projectChoose(0);
		});
	},
	computed: {
		...mapState({
			MatchInfoLayout: 'MatchInfoLayout',
			rankList: 'rankList'
		}),
		preliminariesInfo_export_url() {
			return this.$axios.defaults.baseURL + '/primary/export_primary_result?com_id=' + this.$route.query.MatchId;
		},
		score_sheet_export_url() {
			return this.$axios.defaults.baseURL + '/platoon/export_rank?com_id=' + this.$route.query.MatchId;
		}
	},
	watch: {
		MatchInfoLayout(val) {}
	},
	methods: {
		scoreSheetExport() {
			this.export_loading = true;
			setTimeout(() => {
				this.export_loading = false;
			}, 800);
		},
		checkSchedule() {
			this.$router.push({
				path: '/Index/Match/checkSchedule',
				query: {
					MatchId: this.$route.query.MatchId
				}
			});
		},
		refereeEvaluation() {
			this.$router.push({
				path: '/Index/Match/refereeEvaluation',
				query: {
					MatchId: this.$route.query.MatchId
				}
			});
		},
		diy() {
			this.hasDiy = true;
			console.log(this.rankList);
		},
		comfirmDiy() {
			let custom = [];
			console.log(this.rankList);
			for (let i = 0; i < this.rankList.length; i++) {
				if (this.rankList[i].custom_integral) {
					let obj = {
						id: this.rankList[i].id,
						integral: parseInt(this.rankList[i].custom_integral)
					};
					custom.push(obj);
				}
			}
			console.log(custom);
			this.$axios
				.post(
					'/platoon/custom_integral',
					{
						data: custom
					},
					{
						headers: {
							token: window.sessionStorage.getItem('token')
						}
					}
				)
				.then(res => {
					if (res.data.code == 2000) {
						console.log(this.index);
						this.confirmDiy = true;
						this.hasDiy = false;
						this.projectChoose(this.index);
						this.$message({
							type: 'success',
							message: '操作成功'
						});
					}
				});
		},
		cancle() {
			this.hasDiy = false;
		},
		goback() {},
		projectChoose(index) {
			this.index = index;
			this.loading = true;
			this.$store
				.dispatch('getRankList', {
					com_id: this.$route.query.MatchId,
					project_id: this.projectArr[index].project_id
				})
				.then(() => {
					this.com_system = this.rankList[0].com_system;
					this.activeProjectIndex = index;
					console.log(this.rankList);
					this.loading = false;
				})
				.catch(res => {
					this.com_system = false;
					this.$message({
						type: 'error',
						message: `${this.projectArr[index].project}成绩${res.data.message}`
					});
					this.loading = false;
				});
		}
	}
};
</script>
<style lang="less" scoped>
//
/*.isGroup{*/
/*border-right:1px solid #eaeaea;*/
/*border-bottom:0;*/
/*background-color: #fff;*/
/*color:#409EFF !important;*/
/*}*/
.isGroup {
	border-right: 1px solid #eaeaea;
	border-left: 1px solid #eaeaea;
	border-bottom: 0;
	background-color: #fff;
	color: #409eff !important;
}

//
.scoreAll {
	padding: 20px;

	.basicInfo {
		background: rgba(66, 185, 131, 0.1);
		border-radius: 2px;
		line-height: 40px;
		height: 40px;
		padding: 15px;
		overflow: hidden;

		span {
			margin-right: 20px;
		}

		.goMatchForm {
			float: right;
			margin-right: 20px;
			z-index: 999;
		}
	}

	.tableBox {
		box-shadow: 0px 2px 5px #eaeaea;
		margin-top: 20px;
		border: 1px solid #eaeaea;
		padding-bottom: 10px;

		.group {
			// height: 40px;
			height: auto;
			background-color: #f5f7fa;
			border-bottom: #727272;

			&:after {
				content: '';
				display: block;
				clear: both;
				height: 0;
				overflow: hidden;
			}

			li {
				float: left;
				cursor: pointer;
				height: 40px;
				line-height: 40px;
				text-align: center;
				color: #727272;
				padding: 0 10px;
			}

			/*li:first-child{*/
			/*border-right:1px solid #eaeaea;*/
			/*border-bottom:0;*/
			/*background-color: #fff;*/
			/*color:#409EFF;*/
			/*}*/
			li:hover {
				color: #409eff;
			}

			.hasClick {
				background-color: #409eff;
				color: #fff;
			}
		}

		.tableMain {
			margin-top: 20px;
			padding: 0 20px;

			table {
				margin-top: 10px;
				width: 100%;
				text-align: center;
				border-collapse: collapse;
				border-left: 1px solid #eaeaea;
				border-top: 1px solid #eaeaea;

				thead {
					tr {
						height: 40px;
						background-color: rgba(66, 185, 131, 0.1);

						td {
							width: 100px;
							border-right: 1px solid #eaeaea;
							border-bottom: 1px solid #eaeaea;
						}

						td:nth-child(2) {
							width: 30%;
						}
					}
				}

				tbody {
					tr {
						width: 100%;
						height: 40px;

						td {
							width: 100px;
							border-right: 1px solid #eaeaea;
							border-bottom: 1px solid #eaeaea;

							input {
								text-align: center;
								width: 100px;
								border: 0;
								height: 30px;
								line-height: 30px;
							}
						}

						td:nth-child(2) {
							width: 30%;
						}
					}
				}
			}
		}
	}

	.pagerBox {
		padding: 10px 0;
		overflow: hidden;

		.pager {
			float: right;
		}
	}

	.btnGroup {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: center;
	}
}
</style>
